﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title>Map Suite Sample Template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--SNS-->
    <meta property="og:image" content="image/style/thinkgeo.png" />
    <meta property="og:site_name" content="ThinkGeo.com" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.thinkgeo.com/" />
    <meta property="og:title" content="Online Store" />
    <meta property="og:description" content="Purchase ThinkGeo products online." />

    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/main.css">

    <!-- Favicons-->
    <link rel="shortcut icon" href="images/favicon.png" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png" />
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <div id="header">
                <div id="navbar-brand">
                    <a class="navbar-brand" href="https://thinkgeo.com/" target="_blank"></a>
                    <span class="navbar-text">
                        <h4>Map Suite MVC Edition</h4>
                        <h6>GUIDES, DEMOS AND EXAMPLES APPLICATIONS</h6>
                    </span>
                </div>
                <div class="navbar-collapse main-menu collapse" id="navbar" aria-expanded="false">
                    <ul class="nav navbar-nav header-btn">
                        <li>
                            <a href="#" class="btn" id="about">About</a>
                        </li>
                        <li>
                            <a href="#" class="btn" id="purchase">Purchase</a>
                        </li>
                        <li>
                            <a href="#" class="btn" id="trynow">Try Now</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </nav>
    <div class="container-fluid">
        <div class="col-sm-3 col-md-2 sidebar">
            <form class="form-inline mt-2 mt-md-0">
                <input class="form-control mr-sm-2" id="sidebar-search" type="text" placeholder="search" aria-label="Search" />
                <hr/>
                <div id="search" aria-hidden="true">
                    <i class="fa fa-search"></i>
                </div>
            </form>
            <div id="menu-bar" class="list-group" role="tablist">
            </div>
        </div>

        <main class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="content">
            <div class="title-content">
                <h1></h1>
            </div>
            <ul id="childList">
            </ul>
        </main>
    </div>

    <div class="source-code-panel">
        <div class="col-sm-3 col-md-2 sidebar">
            <div id="back">
                <img src="./images/arrow-left.png" width="30" height="30" alt="back">
                <span>All Components</span>
            </div>
            <div class="list-group" role="tablist" id="grandList">
            </div>
        </div>
        <div class="source-code-content col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Code</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">View</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">..1.</div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">222</div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">.3..</div>
            </div>
        </div>
    </div>
    <div id="loadingImage">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="./temp/bundle.js"></script>
</body>

</html>